<script setup lang="ts">
  import useECharts from '@/hooks/useECharts';
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import { useIntervalFn } from '@vueuse/core';
  import ScrollTable from './scroll-table.vue';

  const pieChart1Option = {
    legend: {
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      left: '65%',
      align: 'left',
      top: 'middle',
      textStyle: {
        color: '#8C8C8C',
      },
    },
    grid: {
      left: '0%',
      right: '4%',
      bottom: '0%',
      top: '3%',
      containLabel: true,
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '80%',
        center: ['40%', '50%'],
        data: [
          { name: 'SOS智能报警器', value: 123 },
          { name: '生命体征监测仪', value: 123 },
          { name: '烟雾报警器', value: 89 },
          { name: '双向通话摄像头', value: 123 },
          { name: '乐龄智护胸卡', value: 145 },
        ],
        itemStyle: {
          color: (list: any) => {
            const colorList = [
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#0dbbf1',
                colorEnd: '#1189e8',
              },
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#f0bec4',
                colorEnd: '#ec8692',
              },
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: 'rgba(253, 197, 100, 1)',
                colorEnd: 'rgba(251, 226, 141, 1)',
              },
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#00dfff',
                colorEnd: '#2cfffd',
              },
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#a4cebd',
                colorEnd: '#2fca68',
              },
            ];
            return new echarts.graphic.LinearGradient(
              colorList[list.dataIndex].l,
              colorList[list.dataIndex].b,
              colorList[list.dataIndex].r,
              colorList[list.dataIndex].t,
              [
                {
                  offset: 0,
                  color: colorList[list.dataIndex].colorStart,
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex].colorEnd,
                },
              ]
            );
          },
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    ],
  };

  const myData5 = [
    '6.25',
    '6.26',
    '6.27',
    '6.28',
    '6.29',
    '6.3',
    '7.01',
    '7.02',
    '7.03',
    '7.04',
  ];
  const fwrs = [2, 4, 2, 3, 2, 3, 3, 4, 4, 2];
  const zhl = [
    100.0, 80.0, 100.0, 75.0, 100.0, 100.0, 100.0, 100.0, 100.0, 100.0,
  ];

  const barChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 255, 233,0)',
              },
              {
                offset: 0.5,
                color: 'rgba(255, 255, 255,1)',
              },
              {
                offset: 1,
                color: 'rgba(0, 255, 233,0)',
              },
            ],
            global: false,
          },
        },
      },
      textStyle: {
        color: '#fff',
      },
      backgroundColor: 'rgba(0, 58, 99, 0.8)',
      borderColor: 'rgba(0, 58, 99, 0.8)',
      confine: true,
      formatter: `{b}<br>{a}：{c}人<br>{a1}：{c1},`,
    },
    legend: {
      itemWidth: 12,
      itemHeight: 8,
      itemGap: 20,
      right: '2%',
      top: '3%',
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      data: ['报警数', '响应率'],
      selectedMode: false,
    },
    grid: {
      top: '18%',
      left: '4%',
      right: '2%',
      bottom: '2%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: myData5,
      axisLabel: {
        color: '#A4A7AA',
        interval: 0,
        fontSize: 12,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(127, 214, 255, .4)',
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '报警数',
        splitNumber: 5,
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
          align: 'center',
          padding: [0, 20, 5, 0],
        },
        axisLabel: {
          formatter: '{value}',
          color: 'rgba(95, 187, 235, 1)',
          textStyle: {
            fontSize: 14,
            color: '#fff',
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(28, 130, 197, .3)',
            type: 'dashed',
          },
        },
      },
      {
        name: '响应率 / %',
        splitNumber: 5,
        max: 100,
        type: 'value',
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
          align: 'center',
          padding: [0, 0, 5, 0],
        },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '报警数',
        type: 'bar',
        data: fwrs,
        barWidth: '15px',
        barGap: '50%',
        itemStyle: {
          normal: {
            borderColor: '#3681FF',
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(15, 51, 82, 1)',
              },

              {
                offset: 1,
                color: 'rgba(0, 168, 255, 1)',
              },
            ]),
          },
        },
        label: {
          show: false,
          position: 'top',
          fontSize: 12,
          color: '#F5F5F5',
          offset: [0, -5],
          formatter: '{c}',
        },
      },
      {
        name: '响应率',
        type: 'line',
        yAxisIndex: 1,
        showSymbol: true,
        symbolSize: 4,
        smooth: false,
        symbol: 'circle',
        lineStyle: {
          normal: {
            color: '#02D6B0',
          },
        },
        itemStyle: {
          color: '#02D6B0',
          borderColor: '#fff',
          borderWidth: 1,
        },
        data: zhl, // 折线图的数据
      },
    ],
  };

  const pieChart1Dom = ref();
  const barChart1Dom = ref();

  const { setOptions: setOptions1 } = useECharts(pieChart1Dom);
  const { setOptions: setOptions2 } = useECharts(barChart1Dom);

  onMounted(() => {
    // @ts-ignore
    setOptions1(pieChart1Option);
    // @ts-ignore
    setOptions2(barChartOption);
  });

  useIntervalFn(() => {
    // @ts-ignore
    setOptions1(pieChart1Option);
    // @ts-ignore
    setOptions2(barChartOption);
  }, 5000);

  const tableColumn = [
    { title: '设备名称', dataIndex: 'name' },
    {
      title: '长者名称',
      dataIndex: 'elderName',
    },
    {
      title: '报警时间',
      dataIndex: 'time',
    },
  ];

  const tableData = [
    { name: '乐龄智护胸卡', elderName: '蔡云祥', time: '07-05 06:35:22' },
    { name: 'SOS智能报警器', elderName: '尚现春', time: '07-05 07:18:37' },
    { name: 'SOS智能报警器', elderName: '陈奉香', time: '07-05 08:20:04' },
    { name: 'SOS智能报警器', elderName: '宋恒凤', time: '07-05 08:40:11' },
    { name: 'SOS智能报警器', elderName: '宋恒花', time: '07-04 17:33:24' },
    { name: 'SOS智能报警器', elderName: '任明花', time: '07-04 11:05:59' },
    { name: '乐龄智护胸卡', elderName: '陈长利', time: '07-03 09:33:25' },
    { name: '乐龄智护胸卡', elderName: '王仕兰', time: '07-03 15:12:36' },
    { name: 'SOS智能报警器', elderName: '沈照花', time: '07-03 09:58:42' },
    { name: 'SOS智能报警器', elderName: '李崇坤', time: '07-03 04:17:46' },
    { name: 'SOS智能报警器', elderName: '宋爱凤', time: '07-02 17:08:34' },
    { name: 'SOS智能报警器', elderName: '陈学文', time: '07-02 13:20:19' },
    { name: 'SOS智能报警器', elderName: '陈明运', time: '07-02 08:47:35' },
    { name: '乐龄智护胸卡', elderName: '任清美', time: '07-02 00:15:03' },
    { name: '乐龄智护胸卡', elderName: '沈学花', time: '07-01 16:52:01' },
    { name: 'SOS智能报警器', elderName: '宋恒花', time: '07-01 10:25:27' },
    { name: 'SOS智能报警器', elderName: '韩祥进', time: '07-01 05:23:16' },
    { name: 'SOS智能报警器', elderName: '韩祥文', time: '06-30 19:16:57' },
    { name: 'SOS智能报警器', elderName: '王香英', time: '06-30 15:38:53' },
    { name: 'SOS智能报警器', elderName: '陈复彬', time: '06-30 09:02:18' },
    { name: '乐龄智护胸卡', elderName: '宋恒爱', time: '06-29 11:10:45' },
    { name: '乐龄智护胸卡', elderName: '徐爱文', time: '06-29 07:33:21' },
    { name: 'SOS智能报警器', elderName: '宋传美', time: '06-28 00:40:18' },
  ];
</script>

<template>
  <div class="flex flex-col">
    <span class="big-title"> 设备预警数据 </span>

    <div class="streamer-button w-full mt-1">
      <div class="streamer-content flex top-box w-full">
        <div class="flex flex-col gap-2">
          <div class="data-content flex flex-col">
            <div>
              <span class="number mt-2">615</span>
              <span>台</span>
            </div>
            <span class="mt-1">当前在用设备数量</span>
          </div>
          <a-divider margin="0" />
          <div class="data-content flex flex-col">
            <span>
              <span class="number">123</span>
              <span>台</span>
            </span>
            <span>SOS报警设备数量</span>
          </div>
        </div>

        <div class="flex flex-col gap-2">
          <div class="data-content flex flex-col">
            <div>
              <span class="number mt-2">12</span>
              <span>台</span>
            </div>
            <span class="mt-1">故障/离线设备数量</span>
          </div>
          <a-divider margin="0" />
          <div class="data-content flex flex-col">
            <span>
              <span class="number">123</span>
              <span>台</span>
            </span>
            <span>毫米波跌倒雷达数量</span>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col w-full mt-2">
      <span class="mid-title">在装设备类型占比</span>
      <div ref="pieChart1Dom" class="w-full h-[100px]"></div>
    </div>

    <div class="flex flex-col w-full">
      <span class="mid-title">30日报警数据趋势图</span>
      <div ref="barChart1Dom" class="w-full h-[220px]"></div>
    </div>

    <div class="flex flex-col w-full">
      <span class="mid-title">设备报警实时数据（今日未处理）</span>
      <div class="w-full mt-2">
        <ScrollTable :height="350" :columns="tableColumn" :data="tableData" />
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .top-box {
    justify-content: space-between;
    // padding: 10px 50px;
    // border: 1px solid #27b6eb;
    // box-shadow: inset 0 0 10px #27b6eb;
    // border-radius: 8px;
  }
  .data-content {
    align-items: center;
    font-size: 12px;
    .number {
      font-size: 20px;
      color: #00f0f4;
      font-weight: bold;
      line-height: 1;
    }
  }
</style>
